<template>
  <div class="boxs xt-py-4">
      <div class="box xt-text-white">
        <div class="box-title">试试你的结婚预算，快速了解婚纱照报价！！！</div>
        <div class="box-con xt-mt-5 xt-flex xt-justify-between">
            <div class="box-con-cont xt-flex xt-justify-between">
                <div class="box-con-cont-t xt-flex xt-align-baseline">
                    <div class="box-con-cont-t-s xt-h5 xt-text-danger xt-font-weight-bolder">01</div>
                    <div class="box-con-cont-t-s xt-ml-1">你的服装数量</div>
                </div>
                <select class="box-con-cont-form" v-model="select1vaule">
                    <option :value ="item" v-for="(item,index) in select1" :key="index">{{ item }}</option>
                </select>
            </div>

            <div class="box-con-cont xt-flex xt-justify-between">
                <div class="box-con-cont-t xt-flex xt-align-baseline">
                    <div class="box-con-cont-t-s xt-h5 xt-text-danger xt-font-weight-bolder">02</div>
                    <div class="box-con-cont-t-s xt-ml-1">你喜欢的风格</div>
                </div>
                <select class="box-con-cont-form" v-model="select2vaule">
                    <option :value ="item" v-for="(item,index) in select2" :key="index">{{ item }}</option>
                </select>
            </div>

            <div class="box-con-cont xt-flex xt-justify-between">
                <div class="box-con-cont-t xt-flex xt-align-baseline">
                    <div class="box-con-cont-t-s xt-h5 xt-text-danger xt-font-weight-bolder">03</div>
                    <div class="box-con-cont-t-s xt-ml-1">期望拍摄场景</div>
                </div>
                <select class="box-con-cont-form" v-model="select3vaule">
                    <option :value ="item" v-for="(item,index) in select3" :key="index">{{ item }}</option>
                </select>
            </div>

            <div class="box-con-cont xt-flex xt-justify-between">
                <div class="box-con-cont-t xt-flex xt-align-baseline">
                    <div class="box-con-cont-t-s xt-h5 xt-text-danger xt-font-weight-bolder">04</div>
                    <div class="box-con-cont-t-s xt-ml-1">您的预算</div>
                </div>
                <select class="box-con-cont-form" v-model="select4vaule">
                    <option :value ="item" v-for="(item,index) in select4" :key="index">{{ item }}</option>
                </select>
            </div>

            <div class="box-con-cont xt-flex xt-justify-between">
                <input placeholder="请输入名字" class="box-con-cont-form" type="text" />
                <input placeholder="请输入手机号码" class="box-con-cont-form" type="text" />
            </div>
            <div class="box-con-cont xt-flex-center-item">
                <div class="box-con-cont-btn xt-flex-center-item" @click="btn()">提交</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
  },
})
export default class Home extends Vue{
    select1:any = ['男女各3套', '男女各4套','男女各5套','男女各6套以上']
    select1vaule:string = '男女各3套'

    select2:any = ['传世经典', '东方嫁娶','男女各5套','婚礼仪式','浪漫轻旅','自然森系','时尚都市','文艺清新','复古主义','大电影']
    select2vaule:string = '传世经典'

    select3:any = ['兰菲堡庄园', '爱琴半岛','美人鱼基地','西西里牧场','布拉格宫殿','东方夏威夷','皇室游艇会所','城市旅拍','其他']
    select3vaule:string = '兰菲堡庄园'

    select4:any = ['3988 - 7999', '12888 - 16888','16888以上']
    select4vaule:string = '3988 - 7999'

    name:string = ''
    tel:string = ''

    // 留言提交
    btn(){
        let phonetest=/^1[3|4|5|7|8|9]\d{9}$/; //手机号码

        if(this.name.trim() === '' || this.tel.trim() === ''){
            alert('请将以上信息填写完整')
            return;
        }

        if(!phonetest.test(this.tel.trim())){
            alert('手机号码填写不规范');
            return;
        }
    }
}
</script> 

<style scoped lang="less">
.boxs{
    background: black;
}
.box{
    width: 1000px;
    margin: 0 auto;
}
.box-con-cont{
    height: 90px;
    flex-direction: column;
}
.box-con-cont-form{
    height: 35px;
}
.box-con-cont-btn{
    height: 50px;
    background: #dc3545;
    width: 100px;
    cursor: pointer;
}
</style>
